<template>
  <el-form label-width="100px">
    <el-form-item label="1.文件名称:" :required="true">
      <el-input
        v-model="form.name"
        style="width: 266px"
        maxlength="15"
        show-word-limit
        class="input"
        placeholder="请输入文件名称"
      />
    </el-form-item>
    <el-form-item label="2.封面上传:" :required="true">
      <uploader
        :oss="'image'"
        :url="form.pageURL"
        @callback="courseCallback"
      />
    </el-form-item>
    <el-form-item label="3.上传文件:" :required="true">
      <file-uploader
        :form="form"
        @create="create"
        @reload="() => {this.$reload()}"
      />
    </el-form-item>
    <el-form-item>
      <el-button style="width: 100px" @click="() => { this.$emit('close') }">取消</el-button>
<!--      <el-button v-if="!form.id" style="width: 150px" type="primary" @click="create">完成添加</el-button>-->
      <el-button v-if="form.id" style="width: 155px" type="primary" @click="update">更新文件</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Uploader from '../../course/module/Upload'
import FileUploader from './fileUpload'
import { updateFile } from '../../../api/file'
export default {
  name: 'FileDialog',
  components: { Uploader, FileUploader },
  props: {
    form: {
      type: Object,
      default: function() {
        return {
          id: null,
          name: '',
          pageURL: '',
          fileURL: '',
          type: ''
        }
      }
    },
    total: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    courseCallback(url) {
      this.form.pageURL = url
    },
    create(item) {
      this.$emit('create', item)
      this.$close()
    },
    update() {
      const config = {
        id: this.form.id,
        name: this.form.name,
        pageURL: this.form.pageURL
      }
      updateFile(config).then(() => {
        this.$SUCCESS('文件更新成功')
        this.$close()
        this.$reload()
      }).catch(() => {
        this.$ERROR('文件更新失败')
      })
    }
  }
}
</script>

<style scoped>
    .upload{
        height: 200px;
    }
    .upload /deep/ .el-upload {
        width: 266px;
        height: 200px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .upload /deep/ .el-upload:hover {
        border-color: #409EFF;
    }
</style>
